{{ header }}
<div id="content">
  <div class="page-header">
    <div class="container">
      <div class="float-end">{{ language }}</div>
      <h1>{{ heading_title }}</h1>
    </div>
  </div>
  <div class="container">
    {% if error_warning %}
      <div class="alert alert-danger"><i class="fa-solid fa-circle-exclamation"></i> {{ error_warning }}</div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-cogs"></i> {{ text_step_3 }}</div>
      <div class="card-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data">
          <fieldset>
            <legend>{{ text_db_connection }}</legend>
            <div class="row">
              <div class="col-md-4 order-md-2">
                <div class="alert alert-info">
                  <p>{{ text_help }}</p>
                  <ul class="text-info">
                    <li><strong><a href="https://docs.cpanel.net/cpanel/databases/mysql-databases/" target="_blank">{{ text_cpanel }}</a></strong></li>
                    <li><strong><a href="https://support.plesk.com/hc/en-us/articles/115004263014-How-to-create-a-database-in-Plesk" target="_blank">{{ text_plesk }}</a></strong></li>
                  </ul>
                </div>
              </div>
              <div class="col-md-8 order-md-1">

                <div class="row mb-3">
                  <div class="col">
                    <label for="input-db-driver" class="form-label">{{ entry_db_driver }}</label>
                    <select name="db_driver" id="input-db-driver" class="form-control" onchange="javascript:document.getElementById('db-advanced').style.display=(this.value=='mysqli')?'block':'none';">
                      {% for driver in drivers %}
                        <option value="{{ driver.value }}"{% if db_driver == driver.value %} selected{% endif %}>{{ driver.text }}</option>
                      {% endfor %}
                    </select>

                    {% if error_db_driver %}
                      <div class="text-danger">{{ error_db_driver }}</div>
                    {% endif %}
                  </div>

                  <div class="col required">
                    <label for="input-db-hostname" class="form-label">{{ entry_db_hostname }}</label>
                    <input type="text" name="db_hostname" value="{{ db_hostname }}" id="input-db-hostname" class="form-control"/>
                    {% if error_db_hostname %}
                      <div class="text-danger">{{ error_db_hostname }}</div>
                    {% endif %}
                  </div>
                </div>

                <div class="row mb-3">
                  <div class="col required">
                    <label for="input-db-username" class="form-label">{{ entry_db_username }}</label>
                    <input type="text" name="db_username" value="{{ db_username }}" id="input-db-username" class="form-control"/>
                    {% if error_db_username %}
                      <div class="text-danger">{{ error_db_username }}</div>
                    {% endif %}
                  </div>
                  <div class="col">
                    <label for="input-db-password" class="form-label">{{ entry_db_password }}</label>
                    <input type="password" name="db_password" value="{{ db_password }}" id="input-db-password" class="form-control" autocomplete="new-password"/>
                  </div>
                </div>

                <div class="row mb-3">
                  <div class="accordion" id="db-advanced" style="display:{{ db_driver =='mysqli'?'block':'none' }};">
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="db-advanced-heading">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#db-advanced-collapse" aria-expanded="false" aria-controls="db-advanced-collapse">
                          {{ entry_db_advanced }}
                        </button>
                      </h2>
                      <div id="db-advanced-collapse" class="accordion-collapse collapse" aria-labelledby="db-advanced-heading">
                        <div class="accordion-body">
                        <div class="alert alert-primary d-flex align-items-center" role="alert">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                          </svg>
                          <div>
                            {{ entry_db_ssl_info }}
                          </div>
                        </div>
                          <div class="row mb-3">
                            <div class="col">
                              <label for="input-db-ssl-key" class="form-label">{{ entry_db_ssl_key }}</label>
                              <textarea name="db_ssl_key" id="input-db-ssl-key" class="form-control">{{ db_ssl_key }}</textarea>
                            </div>
                          </div>
                          <div class="row mb-3">
                            <div class="col">
                              <label for="input-db-ssl-cert" class="form-label">{{ entry_db_ssl_cert }}</label>
                              <textarea name="db_ssl_cert" id="input-db-ssl-cert" class="form-control">{{ db_ssl_cert }}</textarea>
                            </div>
                          </div>
                          <div class="row mb-3">
                            <div class="col">
                              <label for="input-db-ssl-ca" class="form-label">{{ entry_db_ssl_ca }}</label>
                              <textarea name="db_ssl_ca" id="input-db-ssl-ca" class="form-control">{{ db_ssl_ca }}</textarea>
                            </div>
                          </div>                        
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row mb-3">
                  <div class="col-6 required">
                    <label for="input-db-database" class="form-label">{{ entry_db_database }}</label>
                    <input type="text" name="db_database" value="{{ db_database }}" id="input-db-database" class="form-control"/>
                    {% if error_db_database %}
                      <div class="text-danger">{{ error_db_database }}</div>
                    {% endif %}
                  </div>
                  <div class="col-3">
                    <label for="input-db-prefix" class="form-label">{{ entry_db_prefix }}</label>
                    <input type="text" name="db_prefix" value="{{ db_prefix }}" id="input-db-prefix" class="form-control"/>
                    {% if error_db_prefix %}
                      <div class="text-danger">{{ error_db_prefix }}</div>
                    {% endif %}
                  </div>
                  <div class="col-3 required">
                    <label for="input-db-port" class="form-label">{{ entry_db_port }}</label>
                    <input type="text" name="db_port" value="{{ db_port }}" id="input-db-port" class="form-control"/>
                    {% if error_db_port %}
                      <div class="text-danger">{{ error_db_port }}</div>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend>{{ text_db_administration }}</legend>
            <div class="row mb-3">
              <div class="col required">
                <label for="input-username" class="form-label">{{ entry_username }}</label>
                <input type="text" name="username" value="{{ username }}" id="input-username" class="form-control"/>
                {% if error_username %}
                  <div class="text-danger">{{ error_username }}</div>
                {% endif %}
              </div>
              <div class="col required">
                <label for="input-password" class="form-label">{{ entry_password }}</label>
                <input type="text" name="password" value="{{ password }}" id="input-password" class="form-control"/>
                {% if error_password %}
                  <div class="text-danger">{{ error_password }}</div>
                {% endif %}
              </div>
            </div>
            <div class="required">
              <label for="input-email" class="form-label">{{ entry_email }}</label> <input type="text" name="email" value="{{ email }}" id="input-email" class="form-control"/>
              {% if error_email %}
                <div class="text-danger">{{ error_email }}</div>
              {% endif %}
            </div>
          </fieldset>
          <div class="row">
            <div class="col"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
            <div class="col text-end"><input type="submit" value="{{ button_continue }}" class="btn btn-primary"/></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{{ footer }}
